<template>
    <div>
        <el-dialog title="提示" v-model="dialogVisible" width="30%">
            <span>确认要删除该条数据吗?</span>
            <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="handleDelete">确 定</el-button>
                </span>
            </template>
        </el-dialog>
        <div class="search">
            <el-form label-width="80px">
                <el-row>
                                <el-col :span="6" style="padding: 0 8px;">
                                    <el-form-item label="名称">
                                            <el-input v-model="searchObject.name"  placeholder="名称" name="name">
                                            </el-input>
                                    </el-form-item>
                                </el-col>

                    <el-col :span="18" style="padding: 0 10px;">
                        <el-row type="flex" justify="end">
                            <el-button  type="primary" @click="search">搜索</el-button>
                            <el-button   plain @click="clearSearch">清除条件</el-button>
                        </el-row>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="data-content">
            <div class="tool-add">
                <el-button type="primary"   @click="addView">新增</el-button>
            </div>

            <el-table v-loading="loading" :data="pageData.data" @sort-change="changeTableSort"
                  style="width: 100%;font-size: 12px;">
                        <el-table-column label="名称" prop="name"
                                            width="100"   >
                        </el-table-column>
                        <el-table-column label="封面" prop="logo"
                                            width="100"   >
                        </el-table-column>
                        <el-table-column label="面额" prop="money"
                                            width="100"   >
                        </el-table-column>
                        <el-table-column label="商家" prop="shopName"
                                            width="100"   >
                        </el-table-column>
                        <el-table-column label="发放开始时间" prop="sendBeginTime"
                                         sortable="custom"    width="100"   >
                        </el-table-column>
                        <el-table-column label="发放截止时间" prop="sendEndTime"
                                         sortable="custom"    width="100"   >
                        </el-table-column>
                <el-table-column width="210" align="center" fixed="right" label="操作">
                    <template #default="scope">
                        <el-button text   class="operation_bt" :icon="InfoFilled" type="info"   @click="showView(scope.row)">详情
                        </el-button>

                        <el-button text   class="operation_bt" :icon="Edit" type="primary"   @click="editView(scope.row)">编辑
                        </el-button>

                        <el-button text :icon="Delete" class="operation_bt" type="danger"    style="cursor: pointer;"     @click="deleteData(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="page">
                <el-pagination background :current-page="searchObject.no" :page-sizes="[10, 20, 50, 100]"
                               :page-size="pageData.size" :pager-count="5"
                               layout="total, sizes, prev, pager, next, jumper" :page-count="pageData.totalPage"
                               :total="pageData.total" @size-change="sizeChange" @current-change="pageChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script setup>
    import {Delete, Edit,InfoFilled} from '@element-plus/icons-vue'
    import {defineStore} from 'pinia'
    import {usePage} from "@/utils/usePage";
    import {useDelete} from "@/utils/useDelete";
    import {useView} from "@/utils/useView";
    import {useData} from "@/utils/useData";
    import nbSelect from "@/components/nbSelect.vue";
    const searchStore = defineStore('couponRuleStore', {

        state: () => {
            return { searchObject: {
                    no: 1,
                    size: 10,
                    sortField: "id",
                    sortMethod: "desc",
                    shop: null,
                    name: null                }
            }
        }
    })

const  {searchObject}=searchStore();

const clearSearch =()=>{
    searchObject.shop = null;
    searchObject.name = null;
}
const {pageData, sizeChange, pageChange, search, changeTableSort,loading}=usePage("/couponRule/search", searchObject);
const {dialogVisible, deleteData,handleDelete}=useDelete("/couponRule/delete",search);
const {showView,addView,editView}=useView();

</script>

<style scoped>
</style>